<template>
    <div class="page">
        <div style="padding: 10px;">
            欢迎来到小伟的博客系统
        </div>
        <a-form :model="form" :style="{ width: '400px' }" @submit="handleSubmit">
    <a-form-item field="username" hide-label :rules="[{required:true,message:'请输入用户名'}]">
      <a-input
        v-model="form.username"
        placeholder="请输入用户名">
        <template #prefix>
        <icon-user />
      </template>
    </a-input>
    </a-form-item>
    <a-form-item field="password" hide-label :rules="[{rules:true,message:'请输入密码'},
    {minLength:6,message:'密码长度最少6位'}]" >
        <a-input-password v-model="form.password" placeholder="请输入密码" >
        <template #prefix>
            <icon-lock />
        </template>
    </a-input-password>
      
    </a-form-item>
    <a-form-item hide-label>
      <a-button html-type="submit" type="primary" style="width: 100%;">登录</a-button>
    </a-form-item>
  </a-form>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {LOGIN} from '../../api/token'
import { useRouter } from 'vue-router';
import {state} from '../../stores/app'

const router = useRouter()
const form = ref({
    username:'',
    password:'',
})
const handleSubmit = async(data) =>{
    console.log(data)
    try {
      const resp = await LOGIN(form.value)
      console.log(resp)
      state.value.is_login = true
      state.value.token = resp 
      router.push({name:'Backend'})
    
    } catch (error) {
       console.log(error)
      
    }
   
}
</script>

<style lang="css" scoped>

.page{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
}
</style>